<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    .outer
    {
        border: 10px red solid;
        /*
        BFC（Block Formatting Context）块级格式化环境
        BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC
        开启BFC该元素会变成个一个独立的布局区域
        元素开启BFC后的特点：
        1.开启BFC的元素不会被浮动元素所覆盖
        2.开启BFC的元素子元素和父元素的外边距不会重叠
        3.开启BFC的元素可以包含浮动的子元素

        可以通过一些特殊方式开启元素的BFC
        这些方式都有一定的副作用
        1.设置元素的浮动（该方法的副作用是宽度坍缩，不推荐）
        2.将元素设置为行内块元素（副作用是宽度坍缩，不推荐）
        3.将元素的overflow设置为一个非visible的值(推荐用hidden和auto)
        常用的方式为 元素设置overflow:hidden开启其BFC，以使其可以包含浮动元素
        */
        /*float: left;在子元素inner开启了浮动之后，给父元素outer开启浮动就可以开启元素的BFC*/
        /*display: inline-block;此方法也能开启BFC，但是宽度也会坍缩*/
        overflow:hidden;
    }
    .inner
    {
        width: 100px;
        height: 100px;
        background-color: greenyellow;
        /*
        高度塌陷的问题
        在浮动的布局中，父元素的高度默认是被子元素撑开的，
        当子元素浮动后，其会完全脱离文档流，子元素会从文档流中脱离
        将会无法撑起父元素的高度，导致父元素的高度丢失
        
        父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱
        所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理
        */
        float: left;
    }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>

    <div style="width: 100px;height: 100px;background-color: yellow;"></div>
</body>
</html>